<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table {
				margin-top: 10px;
				border: 1px solid black;
				width: 1500px;
				text-align: center;
			}
		
			table tr td {
				border: 1px solid black;
				height: 100px;
			}
		
			img {
				width: 200px;
				height: 100px;
			}
		</style>
		
		<script>
			let shops = [{
					"id": 1,
					"name": "铅笔",
					"price": "2",
					"img": "img/pencil.png",
				},
				{
					"id": 2,
					"name": '洗衣液',
					"price": '20',
					"img": "img/wash.png"
				},
				{
					"id": 3,
					"name": '橡皮擦',
					"price": '3',
					"img": "img/eraser.jpg"
				},
				{
					"id": 4,
					"name": '钢笔',
					"price": '10',
					"img": "img/pen.jpg"
				},
				{
					"id": 5,
					"name": '笔记本',
					"price": '2',
					"img": "img/computer.jpg"
				}
			]
			
			window.onload = function()
			{
				let tab = document.querySelector('table');
				
				function renderData(goods)
				{
					tab.innerHTML = '';
					shops.forEach((n,i) => tab.innerHTML 
						+=
							`<tr>
								<td>${i+1}</td>
								<td>
									<img src='${n.img}'/>
								</td>
								<td>${n.name}</td>
								<td>${n.price}</td>
							</tr>`
					)
				}
				renderData(shops);
				
				let span = document.querySelector('span');
				span.innerHTML = `总共${shops.length}条`;
			}
		</script>
	</head>
	<body>
		<table></table>
		<span></span>
	</body>
</html>